<template>
  <!--测试预览-->
  <div id="testOrRepDetail">
    <div class="taskpage" v-if="isShow">
      <div class="testbox3" v-for="(q, i) in newList" :key="i">
        <!--<div class="title3" ><span  class="single">单选题</span><span>1. 你好</span></div>-->
        <template v-if="q.level == 2">
          <div class="title3">
            <span
              :class="[q.question_type == 2 ? 'many' : 'many2']"
            >{{ q.question_type === 2 ? "单选题" : "多选题" }}</span>
            <span>{{ q.question }}</span>
          </div>
          <div style="clear: both;">
            <ui class="uiOption">
              <li
                v-for="(o, oi) in q.optionList"
                :key="oi"
                @click="fnTestActive(q.question_type, i, oi)"
              >
                <span
                  :class="[
                  o.question_answer === '1' ? 'liOption active' : 'liOption',
                ]"
                  style="margin-top: 14px; float: left;"
                  v-if="o.questions_id == q.id"
                >
                  <span class="zm">{{ o.zm }}</span>
                  {{ o.question_option }}
                </span>
              </li>
            </ui>
          </div>
        </template>
        <div style="clear: both;"></div>
      </div>
      <div class="footerWarpbtn" v-if="testObjData.state != 1">
        <van-button
          color="linear-gradient(to right, #2eb3fb, #195bfc)"
          :loading="loading"
          @click="fnSub()"
          block
          round
          style="height: 40px;"
          class="sub"
        >提交</van-button>
      </div>
    </div>
    <div v-else style="text-align: center; margin-top: 20px;">{{ codeMsg }}</div>
  </div>
</template>
<script>
import getUserInfo from "../../utils/getUserInfo";
import { get } from "../../utils/request";
import { setStorage, getStorage } from "../../utils/storage";

export default {
  data() {
    return {
      userInfo: {},
      testObjData: {},
      isLogin: false,
      isShow: true,
      codeMsg: "",
      openid: "",
      newList: [],
      testlist: {
        // options: [
        //   {del: 0,
        //     id: "73b3cf688b0bfba227e619ab45c8e025",
        //     question_answer: 1,
        //     question_option: " ",
        //     questions_id: "8e2334c553b9f5f779be6e17cb8de79f",
        //     report_id: "ce61cee8fa648d3bfaf051d067a9259e",
        //     sort_no: 1,
        //     task_id: "bbd2e0228c6000ce191dae8c5d85a523"}
        // ],
        // questions:[
        //   {
        //     answer: "李静123",
        //     del: 0,
        //     diners: 0,
        //     id: "d81fa624490e73cc36a545270392b6f6",
        //     level: 2,
        //     pid: "1ea6e3bc13622148b97138de5a060681",
        //     question: "  ",
        //     question_type: 7,
        //     report_id: "ce61cee8fa648d3bfaf051d067a9259e",
        //     score: 0,
        //     score_max: 0,
        //     score_min: 0,
        //     score_step: 0,
        //     sort_no: 2,
        //     task_id: "bbd2e0228c6000ce191dae8c5d85a523",
        //     temp_question_id: "0",
        //     ticket_status: 0
        //   },
        // ]
      },
      loading: false
    };
  },
  onLoad(option) {},
  mounted() {
    //  this.GetTaskInfo()
    //  获取小测试接口
    this.fnInitialize();
    this.testObjData = wx.getStorageSync("testObj");

    wx.setNavigationBarTitle({
      title: this.testObjData.state == 1 ? "小测试预览" : "测试填写"
    });
  },
  computed: {},
  watch: {
    // newList:{
    //   handler:function(val,oldval){
    //     this.newList = val;
    //   },
    //   immediate: true,
    //   deep:true//对象内部的属性监听，也叫深度监听
    // }
  },
  methods: {
    //  获取小测试接口
    fnInitialize() {
      this.$http
        .post({
          url: "/mobile/api/tasktest",
          data: {
            id: wx.getStorageSync("testObj").id,
            type: wx.getStorageSync("testObj").type
          }
        })
        .then(res => {
          if (res.code == "RX0000") {
            this.isShow = true;
            this.testlist = res.data;
            this.newList = this.fnNewList(res.data);
          } else if (res.code == "RX3018" || res.code == "RX3000") {
            this.isShow = false;
            this.codeMsg = res.data;
          } else {
            wx.showToast({
              icon: "none",
              title: res.data
            });
          }
        });
    },
    // 格式化
    fnNewList(arr) {
      let _arrQues = [];
      let _itemObj = {
        option_answer: "",
        option_id: "",
        question_id: ""
      };
      let arrZm = [
        "A",
        "B",
        "C",
        "D",
        "E",
        "F",
        "D",
        "G",
        "H",
        "I",
        "G",
        "K",
        "L"
      ];
      for (let q of arr.questions) {
        let _nq = {};
        let _arro = [];
        let _jj = 0;
        for (let o of arr.option) {
          if (q.id == o.questions_id) {
            o.zm = arrZm[_jj];
            o.isActive = "0";
            o.question_answer = "0";
            _nq = q;
            _arro.push(o);
            _jj++;
          }
        }
        _nq.optionList = _arro;
        _arrQues.push(_nq);
      }
      return _arrQues;
    },
    // 选择题选中
    fnTestActive(type, i, oi) {
      if (wx.getStorageSync("testObj").state == 1) {
        return false;
      }
      if (type == 2) {
        let _tempArr = [];
        for (let ii of this.newList[i].optionList) {
          ii.question_answer = "0";
          _tempArr.push(ii);
        }
        _tempArr[oi].question_answer = "1";
        this.newList[i].optionList = _tempArr;
        this.$set(
          this.newList[i].optionList[oi],
          this.newList[i].optionList[oi].question_answer,
          "1"
        );
      } else if (type == 3) {
        this.newList[i].optionList[oi].question_answer =
          this.newList[i].optionList[oi].question_answer == "0" ? "1" : "0";
        let _v = this.newList[i].optionList[oi].question_answer;
        this.$set(
          this.newList[i].optionList[oi],
          this.newList[i].optionList[oi].question_answer,
          _v
        );
      }
    },
    // 提交
    fnSub() {
      let _items = [];
      for (let i of this.newList) {
        for (let j of i.optionList) {
          let _obj = {};
          if (j.question_answer == "1") {
            _obj.option_answer = 1;
            _obj.option_id = j.id;
            // _obj.question_id = j.questions_id;
            _items.push(_obj);
          } else {
            _obj.option_answer = 0;
            _obj.option_id = j.id;
            // _obj.question_id = j.questions_id;
            _items.push(_obj);
          }
        }
      }
      this.loading = true;
      this.$http
        .post({
          url: "/mobile/api/subtasktest",
          data: {
            id: wx.getStorageSync("testObj").rid,
            customer_id: wx.getStorageSync("userInfo").customer_id,
            items: _items
          }
        })
        .then(res => {
          this.loading = false;
          if (res.code == "RX0000") {
            wx.navigateBack();
          } else {
            wx.showToast({
              icon: "none",
              title: res.msg
            });
          }
        });
    },
    toScan() {
      wx.navigateTo({
        url: "/pages/scan/main"
      });
    }
  }
};
</script>
<style lang="less" scoped>
#testOrRepDetail {
  min-height: 100vh;
  background: #f9f9f9;
  ul,
  ul li {
    list-style: none;
  }
  .taskpage {
    padding-bottom: 8px;
  }
  .testbox3 {
    padding: 21px 19px 14px;
    background: #ffffff;
    margin-bottom: 10px;
  }
  .title3 {
    height: 20px;
    font-size: 12px;
    text-align: left;
    word-wrap: break-word;
    display: flex;
    align-items: center;
  }
  .title3 span {
    font-size: 14px;
    font-weight: 400;
    color: rgba(51, 51, 51, 1);
    line-height: 20px;
  }
  .title3 .single {
    margin-right: 10px;
    padding: 3px 8px;
    background: #fd6715;
    border-radius: 0 4px 0 4px;
    font-size: 9px;
    line-height: 9px;
    color: #ffffff;
    font-style: normal;
  }
  .title3 .many {
    margin-right: 10px;
    padding: 3px 8px;
    background: #7580ff;
    border-radius: 0 7px 0 7px;
    font-size: 9px;
    line-height: 9px;
    color: #ffffff;
    font-style: normal;
  }
  .title3 .many2 {
    margin-right: 10px;
    padding: 3px 8px;
    background: #db4a37;
    border-radius: 0 7px 0 7px;
    font-size: 9px;
    line-height: 9px;
    color: #ffffff;
    font-style: normal;
  }
  .testbox3 li {
    padding: 0;
    line-height: 14px;
    font-size: 10px;
    // padding-left: 18px;
    position: relative;
  }
  .testbox3 li .i {
    position: absolute;
    left: 0;
    top: 0;
    width: 12px;
    height: 12px;
    line-height: 14px;
    margin: 0;
    padding: 0;
    font-style: normal;
    color: #999999;
    text-align: center;
    border: 1px solid #999999;
    border-radius: 12px;
  }
  /* .danxuan{
      background: url('../assets/images/danxuan.png') no-repeat left 2px;
      background-size: auto 12px;
      padding-left: 38px;
    }
    .duoxuan{
      background: url('../assets/images/duoxuan.png') no-repeat left 2px;
      background-size: auto 12px;
      padding-left: 38px;
    }*/
  .uiOption {
    padding: 0 23px;
    display: flex;
    justify-content: space-between;
    .liOption {
      list-style-type: "upper-alpha";
      // padding-right: 40px;
    }
    // .liOption:last-child{
    //   padding-right: 0px;
    // }
    .active {
      color: #226df0;
      > .zm {
        background: #226df0;
        color: #fff;
      }
    }
  }
  .uiOption .zm {
    display: inline-block;
    width: 16px;
    height: 16px;
    text-align: center;
    line-height: 16px;
    border-radius: 50%;
    margin-right: 20rpx;
    background: rgba(255, 255, 255, 1);
    box-shadow: 1px 2px 6px 0px rgba(211, 208, 208, 0.52);
  }
  .sub {
    margin-top: 20rpx;
    .van-button--round {
      height: 64rpx;
      width: 64%;
      margin-top: 40rpx;
    }
  }
}
.footerWarpbtn {
  width: 80%;
  height: 42px;
  margin: 42px auto;
  clear: both;
  button {
    height: 100%;
  }
}
</style>
